img {
  display: block;
  width: 16vw;
  height: auto;
}

div {
  margin: 2rem;
}

.filter01 {
  /* 
    filter表示滤镜特效
    blur表示模糊
    参数值是模糊的程度
  */
  filter: blur(2px);
}

.filter02 {
  /* 
    brightness是亮度
    参数值是亮度的倍数
  */
  filter: brightness(5);
}

.filter03 {
  /* 
    contrast是对比度
    参数值是对比度的倍数
  */
  filter: contrast(5);
}

.filter04 {
  /* invert是反转颜色 */
  filter: invert(1);
}

.filter05 {
  /* grayscale是灰度 */
  filter: grayscale(1);
}

.filter06 {
  /* hue-rotate是色相旋转 */
  filter: hue-rotate(180deg);
}

.filter07 {
  margin: 2rem;
  /* 
    drop-shadow，描边阴影
    参数值分别是水平偏移，垂直偏移，模糊半径，颜色
  */
  filter: drop-shadow(-16px 10px 5px #999);
}

.s1 {
  font-size: 4rem;
  margin: 2rem;
  /* text-shadow表示文本阴影 */
  text-shadow: -8px 6px 8px #ff0000;
}

.s2 {
  filter: grayscale(1) blur(2px);
  transition: filter 1s linear;
}

.s2:hover {
  filter: grayscale(0);
}
